import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Avatar,
  Input,
  Carousel,
  Rate,
} from 'antd';
import { connect } from 'dva';
const { MonthPicker, RangePicker } = DatePicker;
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import numeral from 'numeral';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';


import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './Home.less';

const { dayBtn } = styles;

import { getValueWithLocalStorage } from '@/utils/authority';

const namespace = 'dashboardhome';

const userInfo = getValueWithLocalStorage('userinfo');
import config from '../../../config/web.config'

import shopInfo from  '../../utils/LoginUserUtil'

const mapStateToProps = state => {
  const cardList = state[namespace].data;
  const ayalysisData = state[namespace].ayalysisData;
  const xcxScanTodayNum = state[namespace].xcxScanTodayNum;
  const xcxScanTotalNum = state[namespace].xcxScanTotalNum;
  return {
    cardList,
    ayalysisData,
    xcxScanTodayNum,
    xcxScanTotalNum
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onClickAdd: newCard => {
      const action = {
        type: `${namespace}/addNewCard`,
        payload: newCard,
      };
      dispatch(action);
    },

    getHomeAnalysisData: (_start, _end, _type, _owner) => {
      const action = {
        type: `${namespace}/getHomeAnalysisData`,
        payload: {
          start: _start,
          end: _end,
          type: _type,
          owner: _owner,
        },
      };

      dispatch(action);
    },
    getXcxScanNums: (shopid) => {
      const action = {
        type: `${namespace}/getXcxScanNums`,
        payload: {
          shopid: shopid,
        },
      };
      dispatch(action);
    },
  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      start: moment().format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      loading: false,
    };
  }

  componentDidMount() {
    config.loadlCNZZ()
    this.reloadData();
  }

  reloadData() {
    this.props.getXcxScanNums(shopInfo.shopId());
  }

  render() {
    const dateFormat = 'YYYY-MM-DD';

    const shopInfoRender= (
      <Card
        title={'门店信息'}
        className={styles.shop}
      >
        <Row className={styles.row} gutter={10}>
          <Col span={3}>
            <span className={styles.tipLab}>门店名</span>
          </Col>
          <Col span={9}>
            <span className={styles.contentLab}>{shopInfo.shopName()}</span>
          </Col>
          <Col span={3}>
            <span className={styles.tipLab}>{shopInfo.isVip()?'会员截止日期':'试用截止日期'}</span>
          </Col>
          <Col span={9}>
            <span className={styles.contentLab}>{shopInfo.endTime()}</span>
          </Col>
        </Row>

        <Row className={styles.row} gutter={10}>
          <Col span={3}>
            <span className={styles.tipLab}>门店logo</span>
          </Col>
          <Col span={9}>
            <img className={styles.icon} src={shopInfo.shopLogo()}></img>
          </Col>
          <Col span={3}>
            <span className={styles.tipLab}>宣传图</span>
          </Col>
          <Row className={styles.row} gutter={10}>
            <Col span={5}>
              <Carousel autoplay>
                {shopInfo.shopPics().map((item)=>{
                  if(item.length == 0) {
                    return null
                  }else {
                    return  <img className={styles.icon2} src={item} />
                  }
                })}
              </Carousel>
            </Col>
          </Row>
        </Row>


        <Row className={styles.row} gutter={10}>
          <Col span={3}>
            <span className={styles.tipLab}>门店地址</span>
          </Col>
          <Col span={9}>
            <span className={styles.contentLab}>{shopInfo.address()}</span>
          </Col>
          <Col span={3}>
            <span className={styles.tipLab}>宣传语</span>
          </Col>
          <Col span={9}>
            <span className={styles.contentLab}>{userInfo.advtip}</span>
          </Col>
        </Row>

        <Row className={styles.row} gutter={10}>
          <Col span={3}>
            <span className={styles.tipLab}>服务范围</span>
          </Col>
          <Col span={9}>
            {shopInfo.services()}
          </Col>
          <Col span={3}>
            <span className={styles.tipLab}>营业时间</span>
          </Col>
          <Col span={9}>
            <span className={styles.contentLab}>{shopInfo.workTime()}</span>
          </Col>
        </Row>


      </Card>
  )

    const shopXCXInfoRender= (
      <Card
        title={'门店小程序信息'}
        className={styles.shop}
      >
        <Row className={styles.row} gutter={10}>
          <Card  className={styles.shop} title={'门店二维码'}>
            <Row gutter={10}>
              <Col offset={1} span={4}>
                <img className={styles.icon3} src={shopInfo.shopXCXLogo()}></img>
              </Col>

              <Col offset={2} span={16}>
                <Card title={'小程序使用说明'} type="inner">
                  <p><span className={styles.rankingItemNumber}>1</span>此小程序是给门店客户免费使用,包括查看门店详情，预约服务，查看最新活动,查看消费情况，接受进度消息等</p>
                  <p><span className={styles.rankingItemNumber}>2</span>每个门店拥有一个门店专用的二维码,用户通过微信扫一扫直接打开门店详情页</p>
                  <p><span className={styles.rankingItemNumber}>3</span>如需对小程序有进一步的改动,请联系开发者,微信号/手机号:18251846048</p>
                </Card>
              </Col>

            </Row>
          </Card>
         </Row>

          <Row gutter={10}>
          <Col span={24}>
              <Card title={'小程序统计'}>
                <Row gutter={10}>
                  <Col span={4}>
                    <Card title="当日扫描数" bordered={false}><span className={styles.numStyle}>{this.props.xcxScanTodayNum}</span></Card>
                  </Col>
                  <Col span={4}>
                    <Card title="历史扫描数" bordered={false}><span className={styles.numStyle}>{this.props.xcxScanTotalNum}</span></Card>
                  </Col>
                  <Col span={3}>
                    <Card title="收藏数" bordered={false}><span className={styles.numStyle}>{shopInfo.favNum()}</span></Card>
                  </Col>
                  <Col span={3}>
                    <Card title="评论数" bordered={false}><span className={styles.numStyle}>{shopInfo.commentNum()}</span></Card>
                  </Col>
                  <Col span={5}>
                    <Card title="服务态度" bordered={false}>
                      <Rate allowHalf defaultValue={shopInfo.averageServiceAttitude()} disabled={true} />
                    </Card>
                  </Col>
                  <Col span={5}>
                    <Card title="维修效率" bordered={false}>
                      <Rate allowHalf defaultValue={shopInfo.averageServiceSpeedScore()} disabled={true} />
                    </Card>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
      </Card>
    )

    return (
      <GridContent>
        {shopInfoRender}
        {shopXCXInfoRender}
      </GridContent>
    );
  }
}
